<template>
	<view class="content">
		<view class="left">
			<view class="item" :class="{active:selIndex==index}" @tap="change(index,item)" v-for="item,index in serviceTypeList">{{item}}</view>
		</view>
		<view class="right">
			<view class="item"  v-for="item,index in selServics">
				<image :src="item.imgUrl" mode=""></image>
				<view class="name">{{item.serviceName}}</view>
			</view>
		</view>
     
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"

	onLoad(() => {
		getService()
	})
	// 服务列表
	const services = ref([])
	// 服务类别列表
	const serviceTypeList = ref([])
	// 选中的服务类别对应的服务列表
	const selServics=ref([])
	async function getService() {
		// 获取全部服务
		let {
			rows
		} = await uni.$get("/prod-api/api/service/list")
		rows = rows.map(item => {
			item.imgUrl = uni.$base_url + item.imgUrl
			return item
		})
 
		services.value = rows
		// console.log(rows);
		//提取服务类别
		serviceTypeList.value = rows.map(item => {
			if (item.serviceType!=null)
				return item.serviceType
		})
		//去重
		serviceTypeList.value=Array.from(new Set(serviceTypeList.value))
		// 去除null或undefined
		serviceTypeList.value=serviceTypeList.value.filter(item=>{
			return item!=null && typeof item !='undefined'
		})
		// 添加全部服务类别
		serviceTypeList.value.unshift("全部服务")
		// console.log(services.value);
		// console.log(serviceTypeList.value);
		// 默认显示的服务列表是全部服务
		selServics.value=services.value
	}
	
	const selIndex=ref(0)
	// 点击服务类别
	function change(index,name)
	{
		selIndex.value=index
		if(name=="全部服务")
		{
			selServics.value=services.value
		}else{
			selServics.value=services.value.filter(item=>{
				return item.serviceType==name
			})
		}
		
	}
	
</script>

<style lang="scss">
	.content{
		display: flex;
		.left{
			width: 180rpx;
			// border:1px solid red;
			font-size: 30rpx;
			.item{
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				color: #666;
			}
			.active{
				background-color: #55aa00;
				color:#fff;
			}
		}
		.right{
			width: 560rpx;
			// 右侧使用网格布局
			display: grid;
			// 显示5列,自动宽度,平分容器宽度
			grid-template-columns: repeat(5,auto);
			// 自动行高,会使用单元格的高度
			grid-template-rows: repeat(4,auto);
		 
		 
			.item{
				width: 110rpx;
				height: 180rpx;
				// border:1px solid red;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image{
					width: 80rpx;
					height: 80rpx;
					// border:1px solid green;
				}
				.name{
					text-align: center;
					font-size: 24rpx;
					height: 50rpx;
					// border:1px solid green;
				}
					
			}
		}
	}

</style>